<template>

    <div>
        <!-- 1.顶部图片 -->
        <img class="head" src="../assets/images/yiqing.png">
        <!-- 2.切换 -->
        <div class="nav">
            <div :class="{active:Comp=='Home'}" @click="changeNav">国内疫情</div>
            <div :class="{active:Comp=='Guowai'}" @click="changeNav">国外疫情</div>
        </div>
        <keep-alive>
            <component :is="Comp"></component>
        </keep-alive>

    </div>

</template>


<script>
import Home from './home/HomeView.vue'
import Guowai from './guowai/index.vue'
export default{
    components:{
        Home,
        Guowai,

    },
    data(){
        return{
            Comp:'Home'
        }
    },
    methods:{
        changeNav(){
            this.Comp = this.Comp=='Home'? 'Guowai':'Home';
        }
    }
}
</script>

<style lang="less" scoped>

.head{
    width: 100%;
  }

.nav{
    display: flex;
    // padding: 0.2rem;
    line-height: 0.4rem;
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 0.2rem 0.2rem 0 0 ;
    margin-top: -0.2rem;
    overflow: hidden;
    >div{
        flex: 1;
        text-align: center;
        padding: 0.2rem;
        font-size: 0.34rem;
    }
    .active{
        // background: pink;
        color: rgb(18, 157, 227);
    }

}
</style>